# 2. 安装 weapp-tailwindcss

在项目目录下，执行:

```bash npm2yarn
npm i -D weapp-tailwindcss

# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# npx weapp-tw patch
```

然后把下列脚本，添加进你的 `package.json` 的 `scripts` 字段里:

```json title="package.json"
 "scripts": {
    // highlight-next-line
   "postinstall": "weapp-tw patch"
 }
```

:::info
执行 `weapp-tw patch` 主要是做2件事情

### 1. 给当前你本地的 `tailwindcss` 打上支持 `rpx` 的补丁 (小程序特有单位，非 `web` 标准)。

否则你一旦使用像 `text-[14.43rpx]` 这样的任意值写法，生成出来的 `css` 样式就是 `color: 14.43rpx;`，显然是错误的。

它会被 `tailwindcss` 认为是一种颜色，从而导致生成错误，样式不生效。

详见 [rpx 任意值颜色或长度单位二义性与解决方案](/docs/issues/rpx-ambiguities)

### 2. 暴露 `tailwindcss` 运行上下文给 `webpack`/`vite`/`glup` 插件。

这样就能够在 `js` 中，和 `postcss` 插件进行通信，从而达到共享上下文的效果。

---

而添加上面一段 `npm scripts` 的用途是，利用 `npm hook`, 每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本。

这样即使 `tailwindcss` 更新了版本导致了补丁失效，也会在重新下载后，第一时间被打上。

如果你希望在补丁前“强制刷新 `tailwindcss-patch` 的缓存目录（如 `node_modules/.cache/tailwindcss-patch`）”，可以在命令后附加 `--clear-cache`：

```json title="package.json"
 "scripts": {
   "postinstall": "weapp-tw patch --clear-cache"
 }
```

默认不清理缓存，更加保守稳定；仅当怀疑缓存导致补丁未生效或版本不一致时再开启该参数。
:::

我们已经完成了这些步骤了，最后就是注册这个插件，到各个不同的框架里去，马上就好！
